<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>dog</p>
    <p class="myP2">cat</p>
    <p id="myP3">pig</p>
    <p>rat</p>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
      var p = d3.select("body").select("p"); // 选择第一个p元素
      p.style("color", "red");

      // append() 在选择集尾部插入元素
      // insert() 在选择集前面插入元素

      var p = d3
        .select("body")
        .append("p")
        .text("another animal")
        .style("color", "red");

      // 删除元素
      var p1 = d3.select("body").select("p", "#myP3").remove();

      // insert
      var p2 = d3
        .select("body")
        .insert("p", ".myP2")
        .text("insert an animal")
        .style("color", "green");
    </script>
  </body>
</html>
